<template>
  <el-row class="left-tree-list" :gutter="5">
    <el-col :span="5" :xs="24" :sm="24" :md="5" :lg="5">
      <el-card class="box-card" body-style="padding: 0px;">
        <div slot="header" class="clearfix">
            <span>部门</span>
          </div>
        <div class="text item">
          <el-tree
            :data="deptData"
            ref="deptsTree"
            check-strictly
            accordion
            :highlight-current="true"
            node-key="id"
            :default-checked-keys="selectDept"
            v-loading="dialogDeptLoading"
            :props="defaultDepts">
          </el-tree>
        </div>
      </el-card>
    </el-col>

    <el-col :span="19" :xs="24" :sm="24" :md="19" :lg="19">
      <el-card class="box-card search-header-deptUser" body-style="padding: 0px;">
        <div slot="header" class="clearfix">
          <el-col :xs="6" :sm="16" :md="20">
            <router-link :to="{ path: 'userAdd'}">
              <el-button type="primary" size="small" icon="el-icon-plus">{{$t('btns.add')}}</el-button>
            </router-link>
          </el-col>
          <el-col :xs="18" :sm="8" :md="4">
            <el-input size="small" placeholder="输入用户名称" v-model="searchKey" @keyup.enter.native="search($event)">
              <i slot="suffix" class="el-input__icon el-icon-search" @click="search($event)"></i>
            </el-input>
          </el-col>
        </div>
        <div class="text item">
          <el-table :data="tableData.rows" size="mini" border v-loading="listLoading" :height="tableFull(212)">
            <el-table-column
              prop="id"
              type="selection"
              width="40" align="center">
            </el-table-column>
            <el-table-column
              label="照片" width="76" align="center">
              <template slot-scope="scope">
                <img :src='scope.row.avatar' style="height: 35px;vertical-align: middle;" alt="">
              </template>
            </el-table-column>
            <el-table-column
              prop="username"
              label="名称">
            </el-table-column>
            <el-table-column
              prop="nickname"
              label="登录用户名">
            </el-table-column>
            <el-table-column
              prop="email"
              label="邮箱">
            </el-table-column>
            <el-table-column
              label="状态">
              <template slot-scope="scope">
                {{ scope.row.status===1 ? '已激活' : '未激活' }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="240">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="default"
                  @click="handleEdit(scope.$index, scope.row)">{{$t('btns.edit')}}
                </el-button>
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleRoleConfig(scope.$index, scope.row)">{{$t('btns.config')}}{{$t('btns.role')}}
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">{{$t('btns.delete')}}
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination :class="{'border-pagination': true, 'pagination-right': true}"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="tableData.pagination.page"
            :page-sizes="pageList"
            :page-size="tableData.pagination.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.pagination.total">
          </el-pagination>

          <!-- 角色配置 -->
          <el-dialog class="dialog-select-tree" :title="$t('btns.config') + $t('btns.role') + dialogTitle" 
          :visible.sync="dialogVisible" width="30%">
            <div class="select-tree">
            <el-scrollbar
              tag="div"
              class='is-empty'
              wrap-class="el-select-dropdown__wrap"
              view-class="el-select-dropdown__list">
            <el-tree
              :data="roleData"
              ref="roleTree"
              show-checkbox
              check-strictly
              node-key="id"
              :default-checked-keys="selectRole"
              v-loading="dialogLoading"
              :props="defaultProps">
            </el-tree>
            </el-scrollbar>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogVisible = false">取 消</el-button>
            <el-button size="small" type="primary" @click="submitUserRoles">确 定</el-button>
            </span>
          </el-dialog>
            
          <!-- 新增用户 -->
          
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
  import { mapGetters } from 'vuex'
  import ContentBox from '@/views/layout/components/ContentBox'
  import { getUserList, userDel, userRoles, saveUserRoles, userDepts, saveUserDepts } from '@/api/user'
  import { getRoleList } from '@/api/role'
  import { getDepartmentList } from '@/api/department'
  import UserAddEdit from './components/UserAddEdit'
  import '@/styles/tree-menus.scss'

  export default {
    components: {
      ContentBox,
      UserAddEdit
    },
    computed: {
      ...mapGetters([
        'fullHeight',
        'pageList'
      ])
    },
    data() {
      return {
        // 新增用户
        userAddEditVisble: false,

        searchKey: '',
        currentRow: {},
        dialogVisible: false,
        dialogDeptVisible: false,
        dialogDeptLoading: false,
        listLoading: false,
        tableData: {
          rows: [],
          pagination: {
            total: 0,
            page: 1,
            limit: 10,
            parentId: 0
          }
        },
        roleData: [],
        deptData: [],
        selectDept: [],
        selectRole: [],
        dialogTitle: '',
        dialogLoading: false,
        defaultProps: {
          children: 'children',
          label: 'name',
          id: 'id'
        },
        defaultDepts: {
          children: 'children',
          label: 'name',
          id: 'id'
        }
      }
    },
    methods: {
      tableFull(full) {
        return this.z_fullNum(this.fullHeight, full)
      },
      search(e) {
        this.load()
      },
      handleSizeChange(val) {
        this.tableData.pagination.limit = val
        this.load()
      },
      handleCurrentChange(val) {
        this.tableData.pagination.page = val
        this.load()
      },
      // 配置部门
      handleDeptConfig(index, row) {
        this.currentRow = row
        this.dialogTitle = ' - ' + row.nickname
        this.dialogDeptVisible = true
        this.dialogDeptLoading = true
        // 获取部门列表
        getDepartmentList().then(res => {
          this.deptData = []
          this.deptData.push(...res.data)
          this.dialogDeptLoading = false
        })
        // 获取所选角色
        userDepts({ id: row.id }).then(res => {
          this.selectDept = []
          this.selectDept = res.data
        })
      },
      // 配置角色
      handleRoleConfig(index, row) {
        this.currentRow = row
        this.dialogTitle = ' - ' + row.nickname
        this.dialogVisible = true
        // 获取角色列表
        getRoleList().then(res => {
          this.roleData = []
          this.roleData.push(...res.data)
          this.dialogLoading = false
        })
        // 获取所选角色
        userRoles({ id: row.id }).then(res => {
          this.selectRole = []
          this.selectRole = res.data
        })
      },
      // 保存用户部门
      submitUserDepts() {
        this.dialogDeptLoading = true
        const checkedKeys = this.$refs.deptsTree.getCheckedKeys()
        saveUserDepts({ id: this.currentRow.id, depts: checkedKeys }).then(res => {
          console.log('返回数据', res, checkedKeys)
          this.dialogDeptLoading = false
          this.dialogDeptVisible = false
        })
      },
      // 保存用户角色
      submitUserRoles() {
        this.dialogLoading = true
        const checkedKeys = this.$refs.roleTree.getCheckedKeys()
        saveUserRoles({ id: this.currentRow.id, roles: checkedKeys }).then(res => {
          console.log('返回数据', res, checkedKeys)
          this.dialogLoading = false
          this.dialogVisible = false
        })
      },
      // 修改
      handleEdit(index, row) {
        this.userAddEditVisble = true
        // console.log(index, row, '修改')
        // this.$router.push({ name: 'UserAdd', query: { id: row.id }})
      },
      xxxx(e) {
        console.log('测试xxxx', e)
      },
      visiblex(e) {
        console.log('测试visiblex：', e)
      },
      // 删除
      handleDelete(index, row) {
        userDel({
          id: row.id
        }).then(res => {
          // 刷新
          this.load()
        })
      },
      // 加载数据
      load() {
        this.listLoading = true
        this.dialogDeptLoading = true
        getUserList({
          searchKey: this.searchKey,
          limit: this.tableData.pagination.limit,
          page: this.tableData.pagination.page
        }).then(res => {
          this.tableData.rows = res.data.rows
          this.tableData.pagination.total = res.data.total
          this.listLoading = false
          console.log(res)
        })

        // 获取部门列表
        getDepartmentList().then(res => {
          this.deptData = []
          this.deptData.push(...res.data)
          this.dialogDeptLoading = false
        })
      }
    },
    created() {
      // 初始化数据
      this.load()
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .left-tree-list{
    padding: 0 0 12px;
  }
</style>

<style rel="stylesheet/scss" lang="scss">
  .left-tree-list .search-header-deptUser .el-card__header{
    padding: 5px 10px;
  }
</style>
